<!DOCTYPE html>
<html lang="en">
<head>
    <title>面访按人员分组</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            margin: 1px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }

        table.text-center, table.text-center td, table.text-center th {
            text-align: center;
            font-size: x-small;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }

        .table th {
            background: yellow;
        }

        table td {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .table-bordered {
            border: 1px solid #cbcbcd;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }


    </style>
</head>
<body>
<section class="content" id="app">
    <table class="table table-hover table-bordered text-center ">
        <thead>
        <tr>
            <template v-if="visitType==1">
                <th style="width:40px">面访<br/>排名
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">电访<br/>排名
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <template v-if="!isDay">
                <th style="width:40px">日均<br/>完成</th>
            </template>

            <template v-if="visitType==1">
                <th style="width:40px">目标
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">目标
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-if="visitType==1">
                <th style="width:40px">完成
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">完成
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>
            <th style="width:60px">姓名</th>
            <template v-if="!isDay">
                <th style="width:40px">出勤<br/>天数</th>
            </template>
            <th>区域</th>
        </tr>
        </thead>
        <tbody v-cloak>
        <tr v-for="(item,i) in sendData">
            <td>{{item.rownum}}</td>
            <template v-if="!isDay">
                <td>{{item.averageComplete==""?"-":item.averageComplete}}</td>
            </template>

            <td>{{item.target==""?"-":item.target}}</td>
            <td>{{item.complete==""?"0":item.complete}}</td>

            <td v-if="currentUserId==item.managerId" style="color:#169BD5;cursor: pointer"
                @click="lookInterview(item,'month')">{{item.managerName}}
            </td>
            <td v-else>{{item.managerName}}</td>
            <template v-if="!isDay">
                <td>{{item.signManagerNum==""?"0":item.signManagerNum}}</td>
            </template>
            <td style="text-align:left">{{item.regionName}}</td>
        </tr>

        </tbody>
    </table>
    <!-- /.box-body -->
    <!--<div class="row">-->
    <!--<div id="container" class="col-lg-6 col-xs-6" style="height: 400px; margin: 0 auto"></div>-->
    <!--</div>-->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="../../../dist/plugins/highcharts/highcharts.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript">
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }


    function isDay(time) {
        //2018-01-01
        if (time.length > 8) {
            return true
        } else {
            return false
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            currentUserId: getUrlParam('currentUserId'),
            isDay: isDay(getUrlParam('dateTime')),
            visitType: getUrlParam('visitType'),//0面访 1电访
            sendData: [],
            hour: new Date().getHours(),
        },
        methods: {
            lookInterview: function (item, type) {
                prompt(JSON.stringify(item));
            },
            showChart: function (sendData) {
                //图表
                var color = this.visitType == 1 ? ['#96d4a3'] : ['#7cb5e3']
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
//                    colors: color,
                    legend: {
                        enabled: false,
                        align: 'right', //水平方向位置
                        verticalAlign: 'top', //垂直方向位置
                        floating: true,
                        x: 0, //距离x轴的距离
                        y: 10 //距离Y轴的距离
                    },
                    credits: {enabled: false},
                    title: {
                        text: '',
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: this.visitType == 1 ? sendData.faceName : sendData.telName,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '数量 (个)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}:{point.y}</span><table>',
                        pointFormat: '',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: this.visitType == 1 ? "面访" : "电访",
                        data: this.visitType == 1 ? sendData.faceValue : sendData.telValue
                    }]
                });
            }
        },
        mounted: function () {
            var that = this;
            var data = {
                userId: getUrlParam('userId'),
                dateTime: getUrlParam('dateTime'),
                departId: getUrlParam('departId'),
                type: getUrlParam('visitType'),//0电访 1面访
                isApp: "1",
            };

            //报表
            $.ajax({
                url: server.ip + urlConfig.crm.customer.getRegionByUserId,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var res = JSON.parse(r)
                    that.sendData = res.data.sendData
                    //that.showChart(res.data.sendData)
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
        }
    });
</script>

</body>
</html>